<template>

  <div class="container">


    <!-- 
    
      name 没有使用v-bind  则默认是 string类型
      使用v-bind 则是实际的数据类型
    -->
    <Hero :name="'张三'" v-bind:attack="100"></Hero>
    <Hero name="李四" :attack="200"></Hero>
    <Hero name="王五"></Hero>

  </div>



</template>

<script setup lang="ts" name='App'>
import { ref, reactive } from "vue";

import Hero from "./components/Hero.vue";
</script>

<style scoped>
.container {

  width: 60%;
  min-height: 300px;
  background-color: rgb(233, 218, 81);
  padding: 50px;


}
</style>